@use '../core/variables' as *;
@use '../core/bootstrap';

.site-header {
  background-color: $site-color-white;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .1);
  font-family: $site-font-family-alt;
  position: sticky;
  top: 0;
  z-index: $site-z-header;

  .navbar {
    font-size: bootstrap.$font-size-lg;
    min-height: $site-header-height;

    @include bootstrap.media-breakpoint-up(md) {
      font-size: $font-size-base;
    }

    .navbar-toggler {
      color: $site-color-body;
      margin-right: bootstrap.bs-spacer(4);
      padding: 0;

      .material-symbols {
        font-size: 28px;
      }
    }

    .navbar-brand {
      margin-right: auto;
    }

    .nav-link {
      color: $site-color-nav-links;
      padding: bootstrap.bs-spacer(5) 0;
      position: relative;

      @include bootstrap.media-breakpoint-up(md) {
        padding: 0 bootstrap.bs-spacer(4);
      }

      &.active {
        color: $site-color-body;
        font-weight: 500;

        @include bootstrap.media-breakpoint-up(md) {
          &:after {
            $nav-active-marker-thickness: 3px;
            background-color: $site-color-primary;
            content: '';
            display: block;
            height: $nav-active-marker-thickness;
            left: 0;
            position: absolute;
            top: calc(50% + (#{$site-header-height} / 2) - #{$nav-active-marker-thickness});
            width: 100%;
          }
        }
      }
    }
  }

  .navbar-collapse {
    bottom: 0;
    height: auto !important; // override bootstrap's height calculation
    left: 0;
    position: fixed;
    right: 0;
    top: 0;
    transition-duration: 0s;
    z-index: $site-z-header;

    @include bootstrap.media-breakpoint-down(sm) {
      pointer-events: none;

      &:not(.show) {
        display: block;
      }

      &.show {
        pointer-events: auto;
        transition-duration: 0.35s;

        .site-header__sheet {
          transform: translateX(0);
        }

        .site-header__sheet-bg {
          opacity: 1;
        }
      }

      .navbar-nav {
        margin-bottom: bootstrap.bs-spacer(5);
        overflow-y: auto;
      }
    }

    @include bootstrap.media-breakpoint-up(md) {
      position: static;
    }
  }

  &__sheet {
    display: flex;

    @include bootstrap.media-breakpoint-down(sm) {
      background: $site-color-white;
      bottom: 0;
      flex-direction: column;
      left: 0;
      position: absolute;
      right: 60px;
      top: 0;
      transform: translateX(-100%);
      transition: transform 0.35s ease-in-out;

      > * {
        margin: 0 $site-nav-mobile-side-padding;
      }
    }

    @include bootstrap.media-breakpoint-up(md) {
      align-items: center;
      flex-direction: row;
    }
  }

  &__sheet-bg {
    cursor: pointer; // needed for iOS to recognize the div as clickable

    @include bootstrap.media-breakpoint-down(sm) {
      background: rgba(0, 0, 0, .4);
      bottom: 0;
      left: 0;
      opacity: 0;
      position: absolute;
      right: 0;
      top: 0;
      transition: opacity 0.35s ease-in-out;
    }
  }

  &__cta {
    margin-left: bootstrap.bs-spacer(2);
    padding: bootstrap.bs-spacer(2) bootstrap.bs-spacer(4) !important;

    @include bootstrap.media-breakpoint-down(sm) {
      display: none;
    }
  }

  &__search {
    position: relative;

    &::before {
      content: 'search';
      font: $site-font-icon;
      pointer-events: none;
      position: absolute;
      left: bootstrap.bs-spacer(1);
    }

    @include bootstrap.media-breakpoint-down(sm) {
      border-bottom: 1px solid $site-color-light-grey;
      flex-shrink: 0;
      margin: 0;
      order: -1;
      padding: 0 $site-nav-mobile-side-padding;

      &::before {
        left: $site-nav-mobile-side-padding;
      }
    }

    @include bootstrap.media-breakpoint-up(md) {
      margin-left: bootstrap.bs-spacer(4);
    }
  }

  &__searchfield {
    border: 0;
    font-size: bootstrap.$font-size-sm;
    padding-left: bootstrap.bs-spacer(8);

    @include bootstrap.media-breakpoint-down(sm) {
      font-size: bootstrap.$font-size-lg;
      height: 66px;
      width: 100%;
    }

    @include bootstrap.media-breakpoint-up(md) {
      transition: width .35s ease-in-out;
      width: 24px !important;

      &:focus {
        width: 220px !important;
      }
    }
  }

  &__social {
    .nav-item.nav-link {
      padding: 0 bootstrap.bs-spacer(2);

      @include bootstrap.media-breakpoint-down(sm) {
        padding: 0 bootstrap.bs-spacer(1);
        font-size: smaller;
      }
    }
  }
}
